<template>
  <div>
    <!-- 顶部 -->
    <div class="sidebar-top">
      <div>后台数据管理</div>
      <div @click="signOut">退出</div>
    </div>
    <div class="sidebar-cont">
      <el-menu :default-active="ac_index" @select="Select">
        <div v-for="(item,index) in menu" :key="index">
          <router-link :to="{path:item.router}">
            <el-menu-item v-if="item.Subclass.length == 0" :index="item.id">
              <el-icon>
                <component :is="item.icon"></component>
              </el-icon>
              <span>{{item.title}}</span>
            </el-menu-item>
          </router-link>
          <!-- 二级，三级 -->
          <el-sub-menu v-if="item.Subclass.length > 0" :index="item.id">
            <template #title>
              <el-icon>
                <component :is="item.icon"></component>
              </el-icon>
              <span>{{item.title}}</span>
            </template>
            <div v-for="(two,index_two) in item.Subclass" :key="index_two">
              <router-link :to="{path:two.router}">
                <el-menu-item :index="two.id">{{two.title}}</el-menu-item>
              </router-link>
            </div>
          </el-sub-menu>
        </div>
      </el-menu>
    </div>
    
    <!-- 扁鹊著作与经典药方内容 -->
    <div class="container mx-auto py-16 pl-64">
      <h1 class="text-4xl font-bold text-center mb-12">扁鹊著作与经典药方</h1>
      
      <section class="mb-16">
        <h2 class="text-3xl font-bold mb-6 border-b pb-2">主要医学著作</h2>
        <div class="grid md:grid-cols-2 gap-8">
          <div class="bg-white p-6 rounded-lg shadow-md">
            <h3 class="text-2xl font-bold mb-4 text-yellow-600">《扁鹊内经》</h3>
            <p class="mb-4">记载了扁鹊对人体生理、病理的认识，以及诊断治疗的理论体系。</p>
            <div class="bg-gray-100 p-4 rounded">
              <h4 class="font-bold mb-2">主要内容：</h4>
              <ul class="list-disc pl-5 space-y-1">
                <li>阴阳五行理论在医学中的应用</li>
                <li>脏腑经络学说</li>
                <li>病因病机理论</li>
                <li>诊断方法与治疗原则</li>
              </ul>
            </div>
          </div>
          
          <div class="bg-white p-6 rounded-lg shadow-md">
            <h3 class="text-2xl font-bold mb-4 text-yellow-600">《扁鹊外经》</h3>
            <p class="mb-4">主要记录扁鹊的临床经验和具体治疗方法，包括大量病例分析。</p>
            <div class="bg-gray-100 p-4 rounded">
              <h4 class="font-bold mb-2">主要内容：</h4>
              <ul class="list-disc pl-5 space-y-1">
                <li>各种疾病的临床表现</li>
                <li>具体治疗方法与方剂</li>
                <li>针灸穴位与操作技巧</li>
                <li>养生保健方法</li>
              </ul>
            </div>
          </div>
        </div>
      </section>
      
      <section>
        <h2 class="text-3xl font-bold mb-6 border-b pb-2">经典药方精选</h2>
        <div class="grid md:grid-cols-3 gap-6">
          <div v-for="(prescription, index) in prescriptions" :key="index" 
               class="bg-white p-5 rounded-lg shadow-md hover:shadow-lg transition-shadow">
            <h3 class="text-xl font-bold mb-3">{{ prescription.name }}</h3>
            <p class="text-sm text-gray-600 mb-2">主治：{{ prescription.indication }}</p>
            <div class="mb-3">
              <h4 class="font-bold text-yellow-600 mb-1">组成：</h4>
              <p>{{ prescription.composition }}</p>
            </div>
            <div>
              <h4 class="font-bold text-yellow-600 mb-1">用法：</h4>
              <p>{{ prescription.usage }}</p>
            </div>
          </div>
        </div>
      </section>
      
      <div class="mt-12 text-center">
        <router-link to="keshihua" class="bg-yellow-500 hover:bg-yellow-600 text-white py-2 px-6 rounded-lg inline-block">
          返回首页
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, shallowRef, ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { Histogram, UserFilled, CreditCard, Bowl } from '@element-plus/icons-vue';

export default defineComponent({
  components: { Histogram, UserFilled, CreditCard, Bowl },
  setup() {
    const router = useRouter();
    const Array = [
      {
        id: '1',
        icon: Histogram,
        title: '扁鹊',
        router: 'data',
        Subclass: []
      },
      {
        id: '2',
        icon: UserFilled,
        title: '华佗',
        router: 'userpage',
        Subclass: []
      },
      {
        id: '3',
        icon: CreditCard,
        title: '张仲景',
        router: 'order',
        Subclass: []
      },
      {
        id: '4',
        icon: Bowl,
        title: '皇甫谧',
        router: 'dishes',
        Subclass: []
      },
      {
        id: '5',
        icon: UserFilled,
        title: '葛洪',
        router: '',
        Subclass: [
          {
            id: '5-1',
            title: '人物介绍页面',
            router: 'role',
          }
        ]
      },
      {
        id: '6',
        icon: Histogram,
        title: '数据分析',
        router: 'keshihua',
        Subclass: []
      },
    ];

    const menu = shallowRef(Array);
    const ac_index = ref('1');
    const prescriptions = ref([
      {
        name: "扁鹊四逆汤",
        indication: "伤寒厥逆，手足厥冷",
        composition: "附子(炮)一枚、干姜一两半、甘草(炙)二两",
        usage: "上三味，以水三升，煮取一升二合，去滓，分温再服"
      },
      {
        name: "扁鹊黄连解毒汤",
        indication: "三焦热盛，大热烦狂",
        composition: "黄连三两、黄芩二两、黄柏二两、栀子十四枚",
        usage: "上四味，以水六升，煮取二升，分二服"
      },
      {
        name: "扁鹊温经汤",
        indication: "妇人宫寒不孕，月经不调",
        composition: "吴茱萸三两、当归二两、芍药二两、川芎二两、人参二两、桂枝二两、阿胶二两、牡丹皮二两、生姜二两、甘草二两、半夏半升、麦门冬一升",
        usage: "上十二味，以水一斗，煮取三升，分温三服"
      },
      {
        name: "扁鹊安神汤",
        indication: "虚烦不眠，心悸怔忡",
        composition: "酸枣仁二升、甘草一两、知母二两、茯苓二两、川芎二两",
        usage: "上五味，以水八升，煮酸枣仁得六升，内诸药，煮取三升，分温三服"
      },
      {
        name: "扁鹊活血散",
        indication: "跌打损伤，瘀血肿痛",
        composition: "当归尾、赤芍、川芎、桃仁、红花各等分",
        usage: "上五味为末，每服三钱，温酒调下"
      },
      {
        name: "扁鹊健脾丸",
        indication: "脾胃虚弱，食少便溏",
        composition: "人参、白术、茯苓、甘草、陈皮、山药、莲子肉、砂仁、薏苡仁、桔梗、白扁豆",
        usage: "上药为末，炼蜜为丸，如弹子大，每服一丸，空腹米汤送下"
      }
    ]);

    function Select(index, path) {
      localStorage.setItem('menuid', JSON.stringify(index));
    }

    onMounted(() => {
      ac_index.value = JSON.parse(localStorage.getItem('menuid')) || '1';
    });

    // 退出登录
    function signOut() {
      localStorage.clear();
      router.push({ name: 'login' });
    }

    return { menu, ac_index, prescriptions, Select, signOut };
  }
});
</script>

<style scoped>
.container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16rem; /* 适配侧边栏宽度 */
}

.sidebar-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  z-index: 1000;
}

.sidebar-cont {
  position: fixed;
  top: 60px;
  left: 0;
  bottom: 0;
  width: 16rem;
  overflow-y: auto;
  background: #fff;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
  z-index: 999;
}
</style>